<template>
	<view>
		<uni-card margin="18rpx" padding="6rpx">
			<uni-title type="h1" :title="data.title" align="center"></uni-title>
			<uni-title type="h5" :title="data.createtime" align="right" style="margin-right: 16rpx;"></uni-title>
		</uni-card>
		<uni-card @click="godetail" margin="18rpx" padding="6rpx">
			<view style="display: flex;justify-content: space-between;">
				<view>
					<image :src="baseUrl+user.avatar" class="img2"></image>
				</view>
				<view>
					<view style="font-size: 36rpx;margin-bottom: 16rpx;">{{user.nickName}}</view>
					<view style="font-size: 26rpx;">{{schoolname}}</view>
				</view>
			</view>
		</uni-card>
		<uni-card padding="1" margin="1">
			<uni-fav :checked="check" class="favBtn" :circle="true" bg-color="#dd524d" bg-color-checked="#007aff"
				fg-color="#ffffff" fg-color-checked="#ffffff" @click="favClick" style="margin: 0rpx 0rpx 20rpx 20rpx;"/>
			<text>{{data.content}}</text>
			<image :src="i" v-for="(i,index) in data.imageList" class="image1" @click="yvlan(index)" mode="widthFix"></image>
		</uni-card>
		<uni-section :title="'留言'+messageList.length+'条'" type="line"></uni-section>
		<view class="view1">
			<input type="text" class="int1" placeholder="请输入消息内容" v-model="message" />
			<button type="primary" size="mini" class="btn1" @click="send">发送</button>
		</view>
		<uni-list>
			<uni-list-item :title="i.user.nickName" :note="i.content" v-for="i in messageList"
				:thumb="baseUrl+i.user.avatar" thumb-size="lg" :right-text="i.createtime">
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script>
import { selectpostbarid,selectschoolname,selectinfo, selectpostbar, removepostbar, addpostbar, selectpostbarmessage, addpostbarmessage} from '../../api/myapi'
import config from '@/config'
	export default {
		data(){
			return {
				check: false,
				id:'',
				data:{},
				baseUrl:config.baseUrl,
				user:{},
				schoolname:"",
				show: true,
				message:"",
				messageList:[]
			}
		},
		methods:{
			async favClick(){
				if (this.check) {
					let r = await removepostbar({
						postbarid:this.id,
						userid:uni.getStorageSync("userid")
					})
					console.log(r);
					this.check = false
				}else{
					let r = await addpostbar({
						postbarid:this.id,
						userid:uni.getStorageSync("userid")
					})
					console.log(r);
					this.check = true
				}
			},
			godetail(){
this.$tab.navigateTo('/pages/shop/index?userid=' + this.user.userId)
			},
			async selectschoolname() {
				let r = await selectschoolname({
					id: this.data.userid
				})
				console.log(r);
				this.schoolname = r.data.userSchool
			},
			async getinfo() {
				let r = await selectinfo({
					id: this.data.userid
				})
				console.log(r);
				this.user = r.data
				console.log(this.user);
				if (this.user.userId == uni.getStorageSync('userid')) {
					this.show = false
				} else {
					this.show = true
				}
			},
			yvlan(i){
				uni.previewImage({
					urls:this.data.imageList,
					current:i,
					indicator: 'default'
				})
			},
			async selectone(){
				let r = await selectpostbar({
					postbarid:this.id,
					userid:uni.getStorageSync("userid")
				})
				if (r.data!=null) {
					this.check = true
				}else{
					this.check = false
				}
			},
			async selectmessage(){
				let r = await selectpostbarmessage({
					postbarid:this.id
				})
				console.log(r);
				this.messageList = r.data.reverse()
			},
			async send(){
				let r = await addpostbarmessage({
					postbarid:this.id,
					userid:uni.getStorageSync("userid"),
					content:this.message
				})
				console.log(r);
				this.$modal.msg(r.msg)
				this.message = ""
				this.selectmessage()
			}
		},
		async onLoad(data){
			this.id = data.id
			let r = await selectpostbarid(this.id)
			console.log(r);
			this.data = r.data
			uni.setNavigationBarTitle({
				title:this.data.title
			})
			this.selectschoolname()
			this.getinfo()
			this.selectone()
			this.selectmessage()
		}
	}
</script>

<style>
	.view1 {
		width: 100%;
		background-color: white;
		padding: 10rpx;
		display: flex;
	}
	.btn1 {
		flex: 1;
		margin-left: 10rpx;
	}
	.int1 {
		flex: 9;
		background-color: #F5F5F5;
		border-radius: 20rpx;
		height: 60rpx;
		font-size: 26rpx;
		padding: 4rpx 8rpx;
	}
	.image1 {
		width: 100%;
		border-radius: 20rpx;
	}
	.img2 {
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
		background-color: #c0c0c0;
	}
</style>